<template>
  <div id="movieDetailPage">
    <el-card>
      <el-row class="grid-demo" style="margin-bottom: 16px">
        <el-col :span="12" class="content-wrapper">
          <h2>{{ data.movieName }}</h2>
          <p>{{ data.movieDesc }}</p>
          <p>电影类型：</p>
          <p>上映时间：{{ dayjs(data.releaseDate).format("YYYY-MM-DD") }}</p>
          <el-space size="medium">
            <el-button plain @click="dialogVisible = true">
              <div v-if="evaluation.id === 0 || evaluation.id === undefined">
                评价
              </div>
              <div v-else>{{ rating }}分</div>
            </el-button>
            <el-button type="primary" @click="geToTheater(data.id as number)">
              购票
            </el-button>
          </el-space>
        </el-col>
        <el-col :span="12">
          <el-image width="100%" :src="data.movieIcon"></el-image>
        </el-col>
      </el-row>
    </el-card>
    <el-dialog
      v-model="dialogVisible"
      title="评价"
      width="500"
      :before-close="handleClose"
    >
      <el-space direction="vertical" align="center">
        <el-rate
          v-model="evaluation.rating"
          align="center"
          allow-half
          style="width: 400px; margin: 0 auto"
        />
        <el-input
          align="center"
          v-model="evaluation.evaluationContent"
          style="width: 400px; margin: 0 auto"
          :rows="2"
          type="textarea"
          placeholder="请输入评论"
        />
      </el-space>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="dialogVisible = false">取消</el-button>
          <el-button type="primary" @click="handleEvaluation"> 提交</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import {
  computed,
  defineProps,
  onMounted,
  reactive,
  ref,
  watchEffect,
  withDefaults,
} from "vue";

import API from "@/api";
import { getMovieVoByIdUsingGet } from "@/api/movieController";
import { ElMessage, ElMessageBox } from "element-plus";
import dayjs from "dayjs";
import { useRouter } from "vue-router";
import {
  addMovieEvaluationUsingPost,
  editMovieEvaluationUsingPost,
  listMyMovieEvaluationVoByPageUsingPost,
} from "@/api/movieEvaluationController";

interface Props {
  id: number;
}

const props = withDefaults(defineProps<Props>(), {
  id: () => {
    return 0;
  },
});

const data = ref<API.MovieVO>({});
const router = useRouter();
const geToTheater = (id: number) => {
  router.push(`/theater/${id}`);
};

/**
 * 评价
 */
const evaluation = ref<API.MovieEvaluationVO>({
  id: 0,
  movieId: props.id,
});
const rating = computed(() => {
  return evaluation.value.rating * 2;
});
const dialogVisible = ref(false);
const handleClose = (done: () => void) => {
  ElMessageBox.confirm("Are you sure to close this dialog?")
    .then(() => {
      done();
    })
    .catch(() => {
      // catch error
    });
};

const handleEvaluation = async () => {
  if (evaluation.value.id === 0 || evaluation.value.id === undefined) {
    const res = await addMovieEvaluationUsingPost({
      movieId: props.id,
      rating: evaluation?.value?.rating * 2,
      evaluationContent: evaluation.value.evaluationContent,
    });
    if (res.data.code === 0) {
      evaluation.value.id = res.data.data as any;
      await loadEvaluation();
    } else {
      ElMessage({
        message: "获取数据失败，" + res.data.message,
        type: "error",
      });
    }
  } else {
    const res = await editMovieEvaluationUsingPost({
      movieId: props.id,
      rating: evaluation.value.rating * 2,
      evaluationContent: evaluation.value.evaluationContent,
      id: evaluation.value.id,
    });
    if (res.data.code === 0) {
      await loadEvaluation();
    } else {
      ElMessage({
        message: "获取数据失败，" + res.data.message,
        type: "error",
      });
    }
  }

  dialogVisible.value = false;
};

const loadEvaluation = async () => {
  const res = await listMyMovieEvaluationVoByPageUsingPost({
    movieId: props.id,
  });
  if (res.data.code === 0) {
    evaluation.value = res?.data?.data?.records?.[0] || {};
    evaluation.value.rating = evaluation.value.rating / 2;
  } else {
    ElMessage({
      message: "获取数据失败，" + res.data.message,
      type: "error",
    });
  }
};

onMounted(() => {
  loadEvaluation();
  loadData();
});

/**
 * 加载数据
 */
const loadData = async () => {
  if (!props) {
    return;
  }
  const res = await getMovieVoByIdUsingGet({
    id: props.id as any,
  });
  if (res.data.code === 0) {
    data.value = res.data.data as any;
  } else {
    ElMessage({
      message: "获取数据失败，" + res.data.message,
      type: "error",
    });
  }
};

watchEffect(() => {
  loadData();
});
</script>

<style scoped>
#movieDetailPage {
}

#movieDetailPage .content-wrapper > p {
  margin-bottom: 24px;
}
</style>
